<template>
  <div class="box box-ver box-f1 w-p100">
    <div class="box box-ac w-p100">
      <div class="swiper-container category box-f1">
        <div class="swiper-wrapper">
          <div @click="changeSwiper(key)" class="swiper-slide category-item" :class="{'act': actIndex==key}" v-for="(value,key) in type" :value="value" :key="key">{{value.name}}</div>
        </div>
      </div>
      <div @click="$router.push('/search')" class="icon icon-serach"></div>
    </div>
    <div ref="movieList" class="list w-p100 box-f1 of-y-s">
      <div @click="goDetail(value, key)" v-lazy:background-image.container="value.poster" v-for="(value,key) in movieList" :value="value" :key="key" class="movie-item bg-img2">
        <div class="title ell">{{value.title}}</div>
      </div>
      <div v-if="movieList.length > 0" @click="loadMore()" class="tips-end">{{hasLoadAll ? '已经没有更多了' : '点击加载更多'}}</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper'
import { mapState } from 'vuex'
export default {
  name: 'movie',
  data () {
    return {
      Swiper: null,
      actIndex: 0,
      page: 1,
      hasLoadAll: false,
      type: [{
        id: 1,
        name: '自拍'
      }, {
        id: 2,
        name: '伦理片'
      }, {
        id: 3,
        name: '一本道'
      }, {
        id: 4,
        name: 'JAVHD'
      }, {
        id: 5,
        name: '中文字幕'
      }, {
        id: 6,
        name: '东京热'
      }, {
        id: 7,
        name: '亚洲'
      }, {
        id: 8,
        name: '欧美'
      }, {
        id: 9,
        name: '动漫'
      }, {
        id: 10,
        name: '有码'
      }, {
        id: 11,
        name: '无码'
      }, {
        id: 12,
        name: 'VR视频'
      }, {
        id: 13,
        name: '女女'
      }, {
        id: 14,
        name: '群交'
      }, {
        id: 15,
        name: '福利'
      }],
      movieList: []
    }
  },
  computed: mapState(['userInfo']),
  mounted () {
    this.getMovieList()
    this.$nextTick(() => {
      this.Swiper = new Swiper('.swiper-container', {
        autoplay: false,
        slidesPerView: 5
      })
      // this.initScroll(this.$refs.movieList)
    })
  },
  methods: {
    loadMore () {
      if (this.hasLoadAll) return
      this.page++
      this.getMovieList()
    },
    changeSwiper (index) {
      if (this.actIndex === index) return
      this.actIndex = index
      this.page = 1
      this.hasLoadAll = false
      this.Swiper.slideTo(index, 333, false)
      this.getMovieList()
    },
    getMovieList () {
      if (this.hasLoadAll) return
      let type = this.type[this.actIndex].id
      let page = this.page
      if (this.page === 1) this.movieList = []
      this.$http({
        method: 'get',
        url: `${this.$config.apiBase}/api/v0/movie/list`,
        data: {
          type,
          page,
          pageSize: 20,
          keyword: ''
        }
      }).then(res => {
        let data = res.data
        if (data.length === 0) {
          this.hasLoadAll = true
        } else {
          this.movieList = this.movieList.concat(res.data)
        }
      })
    },
    goDetail (item, key) {
      // if (!this.userInfo._id) {
      //   this.$router.replace('/login')
      // } else {
      if (!this.userInfo.vip) {
        if (key < 2 && this.actIndex === 0) {

        } else {
          return this.$tools.popup({
            tpl: 'alert',
            title: '提示',
            content: `无驾照每天只能看两部`,
            buttons: ['取消', `<div class="tc-main">查看说明</div>`],
            buttonCallBack: index => {
              if (index === 1) {
                this.$router.push('/myVip')
              }
            }
          })
        }
      }
      this.$router.push({
        path: '/detail',
        query: {
          id: item._id
        }
      })
      // }
    }
  }
}
</script>

<style lang="scss" scopedSlots>
@import '../assets/css/config.scss';
.icon-serach{
  width:.66rem;
  height:.66rem;
  margin:0 .1rem;
  z-index:1;
}
.category{
  background-color:#FFF;
  color:#FFF;
  height:.85rem;
  .category-item{
    color:#666;
    font-size:.32rem;
    height:.8rem;
    line-height: .8rem;
    text-align: center;
    &.act{
      color:$themeColor;
      border-bottom:.05rem solid $themeColor;
    }
  }
}

.movie-item {
  position: relative;
  background-color:#EEE;
  width:100%;
  padding-top:50%;
  margin-top:.06rem;
  margin-bottom:.06rem;
  .title{
    position: absolute;
    bottom:0;
    background-color:rgba(0,0,0,.66);
    padding:.15rem 0;
    color:#FFF;
    width:100%;
    text-indent: .2rem;
    font-size:.3rem;
  }
}

.tips-end{
  border-radius:.08rem;
  border: 1px solid $themeColor;
  font-size:.32rem;
  text-align: center;
  padding: .15rem 0;
  margin: .2rem;
  color: $themeColor
}
</style>
